<template>
  <div class="wallet-wrap">
    <div class="login-form__wrap">
      <!-- 获取交易验证 -->
      <div class="login-box">
        <div class="wallet_main">
          <el-form :model="form" :rules="rules" ref="form" label-width="0">
            <!-- 手机验证 -->
            <div v-if="set.phoneEnable">
              <el-alert type="success" v-if="sendCode"
              :title="`验证码已发送至您的手机(${user.phone})。`" class="mb" />
              <el-form-item prop="code">
                <el-input placeholder="请输入手机验证码" style="width: 220px;"
                v-model="form.code"></el-input>
                <el-button @click="handleSendCode" style="width: 112px"
                :disabled="handleBtnDisabled" type="primary" class="get-code">
                  {{ !sendCode ? $t('lg.codeGet') : countDown + 's' }}
                </el-button>
              </el-form-item>
            </div>
            <!-- 邮箱验证 -->
            <div v-if="set.emailEnable">
              <el-alert type="success" v-if="sendEmailCode"
              :title="`验证码已发送至您的邮箱(${user.email})。`" class="mb" />
              <el-form-item prop="emailCode">
                <el-input placeholder="请输入邮箱验证码" style="width: 220px;"
                v-model="form.emailCode"></el-input>
                <el-button @click="handleSendCodeEmail" style="width: 112px"
                :disabled="handleBtnDisabledEmail" type="primary" class="get-code">
                  {{ !sendEmailCode ? $t('lg.codeGet') : countDownEmail + 's' }}
                </el-button>
              </el-form-item>
            </div>
            <!-- 验证器验证 -->
            <div v-if="set.authenticatorEnable">
            </div>
            <el-button type="primary" style="width: 100%"
            @click="handleNext('form')">提 交</el-button>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'verify-deal',
  data() {
    return {
      set: {},
      user: {},
      form: {
        phone: '',
        code: '', // 手机验证码
        email: '',
        emailCode: '', // 手机验证码
        authenticatorCode: '' // 验证器码
      },
      countDown: 0,
      sendCode: false, // 发送手机验证

      sendEmailCode: false, // 发送邮箱验证
      countDownEmail: 0,
      rules: {
        code: [
          { required: true, message: '请输入手机验证码', trigger: 'blur' },
        ],
        emailCode: [
          { required: true, message: '请输入邮箱验证码', trigger: 'blur' },
        ],
      }
    }
  },
  props: {
    verifyType: Number // 交易验证2 转账验证3
  },
  created() {
    this.user = this.$store.state.app.userInfo;
    this.handleGetSetting();
  },
  computed: {
    handleBtnDisabled() {
      return this.sendCode;
    },
    handleBtnDisabledEmail() {
      return this.sendEmailCode;
    },
  },
  components: {
  },
  mounted() {
  },
  destroyed() {
  },
  methods: {
    // 获取验证设置
    handleGetSetting() {
      this.$http.post('/user/securityConfigInfo').then((response) => {
        if (response.code !== 0) {
          this.$message.error(response.msg);
          return;
        }
        // const json = {
        //   authenticatorEnable: null, // 验证器
        //   phoneEnable: null,
        //   emailEnable: null,
        //   loginPasswordEnable: null,
        //   walletPasswordEnable: null
        // };
        this.set = response.userVerificationList.find(v => v.type === Number(this.verifyType));
        if (!this.set.phoneEnable && !this.set.emailEnable && !this.set.authenticatorEnable) {
          const params = this.form;
          params.flag = false;
          this.$emit('listenVerifyDealClose', params);
        }
      });
    },
    // 导入钱包
    handleNext(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const params = this.form;
          params.flag = false;
          this.$emit('listenVerifyDealClose', params);
        } else {
          this.$message.error('验证未通过！');
        }
      });
    },

    // 发送手机验证码
    handleSendCode() {
      this.sendCode = true;
      const params = {
        phone: this.user.phone
      };
      this.$http.post('/userVerify/sendSms', params).then((res) => {
        if (res.code !== 0) {
          this.$message.error(res.msg);
          this.sendCode = false;
          return;
        }
        this.$message({
          message: '发送验证码成功',
          type: 'success',
        });
        this.countDown = 60;
        this.timer = setInterval(() => {
          if (!this.countDown) {
            clearInterval(this.timer);
            this.sendCode = false;
            return;
          }
          this.countDown -= 1;
        }, 1000);
      });
    },

    // 发送邮箱验证码
    handleSendCodeEmail() {
      this.sendEmailCode = true;
      const params = {
        email: this.user.email
      };
      this.$http.post('/userVerify/sendEmail', params).then((res) => {
        if (res.code !== 0) {
          this.$message.error(res.msg);
          this.sendEmailCode = false;
          return;
        }
        this.$message.success(res.msg);
        this.countDownEmail = 60;
        this.timer = setInterval(() => {
          if (!this.countDownEmail) {
            clearInterval(this.timer);
            this.sendEmailCode = false;
            return;
          }
          this.countDownEmail -= 1;
        }, 1000);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";
.wallet-wrap {
  .wallet_main{
    padding: 10px 0;
  }
}
</style>
